<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4" >
<head th:fragment="head(title)">
    <meta charset="UTF-8">
    <title th:text="${title}">所有文章</title>
    <!--    导入layui组件，优秀的弹窗框架-->
    <link rel="stylesheet" th:href="@{/plugins/layui-v2.6.8/layui/css/layui.css}">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" th:href="@{/css/font-img.css}">
<!--    确认框-->
    <link rel="stylesheet" th:href="@{/plugins/jconfirm/jquery-confirm.min.css}">
</head>
<body>

<div th:fragment="main(article)" class="col-md-12">

    <div class="tab-content">
<!--        所有文章-->
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered">
                    <thead>
                    <tr>
                        <th>文章标题</th>
                        <th>发布时间</th>
                        <th>作者</th>
                        <th>编辑</th>
                        <th>阅读量</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <th:block th:each="list : ${article.list}">
                        <tr >
                            <td th:text="${list.articleTitle}"></td>
                            <td th:text="${#dates.format(list.articleNewstime,'yyyy/MM/dd HH:mm:ss')}"></td>
                            <td th:text="${list.articleAuthor}"></td>
                            <td th:text="${list.articleEdit}"></td>
                            <td th:text="${list.articleViews}"></td>
                            <td th:if="${list.articleStatus}==0" >已发布</td>
                            <td th:if="${list.articleStatus}==1" >草稿</td>
                            <td>
                                <div class="btn-group">
                                    <button type="button" th:onclick="'javascript:details('+${list.id}+')'" class="layui-btn layui-btn-normal layui-btn-sm"><i class="iconfont icon-yulan"></i></button>
                                    <a th:href="@{'/admin/editArticle/'+${list.id}}"  target="_blank"   class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon"></i></a>
                                    <button type="button" th:onclick="'javascript:myDelete('+${list.id}+')'" class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon"></i></button>
                                </div>
                            </td>
                        </tr>
                    </th:block>
                    </tbody>
                </table>
            </div>

            <div th:replace="admin/public/module :: pageAdminNav(${articlePageInfo})"></div>

        </div>
    </div>
</div>
<div th:fragment="javascript">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" type="text/javascript"></script>
<!--    确认弹窗组件-->
    <script th:src="@{/plugins/jconfirm/jquery-confirm.min.js}"></script>
    <script type="text/javascript">
        /*查看文章*/
        function details(id) {
            // alert(id)
            window.location.href="/admin/articleDetails/"+id;
        }


        /*删除文章
        * */
        function myDelete(id) {
            // alert(id)
            $.alert({
                title: '提示!',
                content: '确认删除吗？',
                buttons: {
                    confirm: {
                        text: '确认',
                        btnClass: 'btn-primary',
                        action: function(){
                            $.ajax({
                                url:"/admin/deleteArticle/"+id,
                                // dataType:'json',
                                success:function (data) {
                                    // alert("成功")
                                    location.reload();
                                }
                            });
                        }
                    },
                    cancel: {
                        text: '取消',
                        action: function () {

                        }
                    }
                }
            });

        }

    </script>
</div>
</body>
</html>